<template>
	<view>
		<view class="titleBox">
			<view class="searchBox">
				<u-icon class="gridBox" name="grid-fill" color="#55aa7f" size="30" @click="typeSearch"></u-icon>
				<u-button type="success" size="mini" :ripple="true" style="margin-top: 2px;margin-left: 15px;">品牌</u-button>
				<u-search 
					:placeholder="'请输入三元品牌查找'" 
					v-model="carType" height="60" 
					:show-action="false" 
					style="margin-left: 2px;" 
					bg-color="#ffffff" 
					@change="search" 
					@clear="clear">
				</u-search>
			</view>
		</view>
		<view v-show="threeElementsInfoShow == false" class="flex-column nothreeElementsInfoBox">
			<image src="../../../static/logo.png"></image>
			<text>暂无三元车型列表信息 ~ </text>
		</view>
		<u-gap height="4" bg-color="#f0f0f0"></u-gap>
		<view v-show="threeElementsInfoShow" >
			<view class="box">
				<view class="flex-column textCenter padding2" v-for="(item,index) in carTypeArr" :key="index" style="float: left;">
					<view style="width: 72px;height: 72px;padding: 3%;border-radius: 50%;border: 1rpx solid #bababa;align-items: center;">
						<image style="width: 65px;height: 65px;border-radius: 50%;" :src="item.icon" @click="carTypeSearch(item.carType)"></image>
					</view>
					<text style="margin-top: 5px;">{{ item.carType }}</text>
				</view>
			</view>
		</view>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import {
		url_1,
		url_2,
		url_3
	} from '@/common/js/api/url.js'
	import store from '@/store/index.js';
	import {getMaterial} from "@/common/js/api/api.js";
	export default {
		onLoad() {
			this.carTypeImg = wx.getStorageSync('carTypeImg');
			uni.startPullDownRefresh();
			this.onShareAppMessage();
			this.onShareTimeline();
		},
		onTabItemTap() {
			this.carType = '';
			uni.setStorageSync('carType','');
			this.carTypeImg = wx.getStorageSync('carTypeImg');
		},
		data() {
			return {
				threeElementsInfoShow: true,
				carType: '',
				carTypeArr: [],
				show: false,
				carTypeImg: []
			}
		},
		onPullDownRefresh() {
			this.getMaterialData();
			setTimeout(() =>{
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			carTypeSearch(carType) {
				uni.setStorageSync('carType',carType);
				uni.switchTab({
					url: '../home/home'
				})
			},
			getMaterialData() {
				let queryObj = {
					page: 0,
					size: 8
				};
				getMaterial(queryObj).then(res => {
					if(res.data.totalElements > 0) {
						this.threeElementsInfoShow = true;
					}else {
						this.threeElementsInfoShow = false;
					}
				})
				this.carTypeImg.forEach(item => {
					// if(item.BrandName == 'BYD') {
					// 	item.carType = '比亚迪';
					// }else {
					// 	item.carType = item.BrandName;
					// }
					item.carType = item.BrandName;
					item.icon = 'https://api.youyubang.cn/hisanyuanapi/' + item.ImgUrl;
				})
				this.carTypeArr = this.carTypeImg;
			},
			search() {
				if(this.carType != '' ) {
					this.carTypeArr = this.carTypeArr.filter(item => item.carType === this.carType);
					if(this.carTypeArr.length == 0) {
						this.threeElementsInfoShow = false;
					}
				}else {
					this.getMaterialData();
				}
			},
			clear() {
				this.carType = '';
				this.getMaterialData();
			},
			typeSearch() {
				uni.switchTab({
					url: '../home/home'
				})
			},
			onShareAppMessage() {
				const promise = new Promise(resolve => {
					setTimeout(() => {
						resolve({
							title: '鑫三元催化风向标'
						})
					}, 1000)
				})
				return {
					title: '鑫三元催化风向标',
					promise 
				}
			},
			onShareTimeline() {
				const promise = new Promise(resolve => {
					setTimeout(() => {
						resolve({
							title: '鑫三元催化风向标'
						})
					}, 1000)
				})
				return {
					title: '鑫三元催化风向标',
					promise 
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: rgb(240, 240, 240);
	}
	.titleBox {
		background-color: #FFFFFF;
		padding: 2%;
		display: flex;
		flex-direction: row;
		align-items: center;
		text-align: center;
	}
	.searchBox{
		display: flex;
		flex-direction: row;
		width: 87%;
		margin-left: 3%;
	}
	.gridBox {
		background-color: #FFFFFF;
		border-radius: 50%;
		box-shadow: 2px 2px 4px #8C8C8C;
		padding: 2%;
	}
	.demo-warter {
		border-radius: 10px;
		margin: 5%;
		background-color: #ffffff;
		padding: 6%;
		position: relative;
	}
	.demo-image {
		width: 100%;
		border-radius: 10px;
	}
	.demo-name {
		font-size: 26rpx;
		margin-top: 8px;
		font-weight: 600;
	}
	.demo-tag {
		display: flex;
		margin-top: 6px;
	}
	.demo-tag-owner {
		background-color: #DD524D;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	.demo-tag-text {
		border: 1px solid #00557F;
		color: #00557F;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
	.demo-tag-type {
		background-color: #55aa7f;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
		margin-left: 10px;
	}
	.demo-price {
		font-size: 26rpx;
		color: #DD524D;
		margin-top: 8px;
	}
	.demo-shop {
		font-size: 11px;
		color: #5b5b5b;
		margin-top: 6px;
	}
	.nothreeElementsInfoBox {
		height: 100vh;
		background-color: #FFFFFF;
		padding: 10%;
		align-items: center;
	}
	.nothreeElementsInfoBox image {
		height: 80px;
		width: 80px;
		margin-top: 35%;
	}
	.nothreeElementsInfoBox text {
		font-weight: 600;
		margin-top: 5%;
	}
	.item {
			display: flex;
			padding: 2.5%;
		}
	.item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}
	.title {
		text-align: left;
		font-size: 28rpx;
		color: $u-content-color;
	}
	.listBox {
		background-color: #FFFFFF;
	}
	.box {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 3%;
	}
	.box:after {content: ""; width: 175px; } 
</style>